<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <p @click="count++">count:{{count}}</p>
        <!-- 
            v-memo: 依赖 后面的数组中的值,当数组中的值变化的时候, 那么就更新当前的dom 节点,
            当数组中的值没有变化的时候, 那么就不会重新创建虚拟dom, 同时也不更新dom

            // 情形2: 当依赖项数组为空数组, 则表示没有依赖的依赖的数据,那么当前绑定该指令的dom,不更新
         -->
        <!-- <p v-memo="[username]">username:{{username}}</p> -->
        <!-- <p v-memo="[]">v-memo-count:{{count}}</p> -->
        <!-- <p v-memo="[count]">v-memo-count:{{count}}</p> -->


        <!-- v-memo 与 v-for 一起使用 -->
        <div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
            <p>ID: {{ item.id }} --{{item.name}} - selected: {{ item.id === selected }}</p>
            <!-- <p>...more child nodes</p> -->
        </div>

        <button @click="selected++">selected:{{selected}}</button>

    </div>
</body>

</html>
<script>
    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                count: 100,
                username: '焦海龙',
                selected: 1,
                list: [
                    {
                        id: 1,
                        name: '李元霸'
                    },
                    {
                        id: 2,
                        name: '宇文成都'
                    },
                    {
                        id: 3,
                        name: '裴元庆'
                    }
                ]
            }
        }
    }).mount('#app') 
</script>